export default {
  mounted(el, bind, vnode) {
    let isResizing = false;
    let startX, startWidth;

    el.style.resize = "horizontal"; // 允许水平调整大小
    el.style.overflow = "auto"; // 确保内容不会溢出

    el.addEventListener("mousedown", (event) => {
      if (event.target === el) {
        isResizing = true;
        startX = event.clientX;
        startWidth = parseInt(
          document.defaultView.getComputedStyle(el).width,
          10
        );
      }
    });

    document.addEventListener("mousemove", (event) => {
      if (!isResizing) return;
      const width = startWidth + (event.clientX - startX);
      el.style.width = `${width}px`;
    });

    document.addEventListener("mouseup", () => {
      isResizing = false;
    });

    // let isResizing = false;
    // let startX, startWidth;

    // el.style.resize = "none"; // 移除 resize 属性
    // el.style.overflow = "auto"; // 确保内容不会溢出
    // el.style.position = "relative"; // 确保手柄可以定位

    // // 创建自定义手柄
    // const handle = document.createElement("div");
    // handle.style.position = "absolute";
    // handle.style.top = "0";
    // handle.style.right = "0";
    // handle.style.width = "10px";
    // handle.style.height = "10px";
    // handle.style.backgroundColor = "#ccc";
    // handle.style.cursor = "ew-resize"; // 调整手柄的鼠标样式
    // el.appendChild(handle);

    // // 处理调整大小逻辑
    // handle.addEventListener("mousedown", (event) => {
    //   isResizing = true;
    //   startX = event.clientX;
    //   startWidth = parseInt(
    //     document.defaultView.getComputedStyle(el).width,
    //     10
    //   );
    // });

    // document.addEventListener("mousemove", (event) => {
    //   if (!isResizing) return;
    //   const width = startWidth + (event.clientX - startX);
    //   el.style.width = `${width}px`;
    // });

    // document.addEventListener("mouseup", () => {
    //   isResizing = false;
    // });
  },
};
